.card_{
    padding: 8px;
}
.card_item{
    width: 210px;
    height: 176px;
    border: 1px solid #f3f3f3;
    border-radius: 4px;
    padding: 12px;
    position: relative;
    margin: 0 12px 12px 0;
}
.card_item_scuess{
    position: absolute;
    border-right: 26px solid transparent;
    right: -26px;
    bottom: -26px;
    border-top: 26px solid #fea8e8;
    border-bottom: 26px solid transparent;
    border-left: 26px solid  transparent;
    transform: rotate(-45deg);

}
.card_item_scuess::after{
    position: absolute;
    content: '';
    width: 10.5px;
    height: 6.9px;
    border-bottom: 2px solid rgb(202, 29, 34);
    border-left: 2px solid rgb(202, 29, 34);
    left: -4px;
    bottom: 12px;
}
.card_{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.card_item_top{
    position: absolute;
    width: 48px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: sandybrown;
    padding-right: 3px;
    border-bottom-right-radius: 20px;
    left: 0;
    top: 0;
}
@property --direc{
    syntax:'<angle>';
    initial-value:0deg;
    inherits:false;
}
.card_bgc{
    --direc:0deg;
    width:100px;
    height:200px;
    color:red;
    font-size:2rem;
    background-image:linear-gradient(var(--direc),#5ddcff,#3c67e3,43%,#4e00c2);
    animation:rotate 3s linear infinite;
}
@keyframes rotate{
    to{
        --direc:360deg;
        /* background-image:linear-gradient(360deg,#5ddcff,#3c67e3,43%,#4e00c2); */
    }
}